在Day05帶大家看Stack Overflow Developer Survey的時候有提到Visual Studio Code(以下稱VS Code)是現在最受歡迎的開發者工具。

擴展工具

VS Code有著豐富的擴展工具能顯著提升開發體驗，簡單介紹幾個我常用的擴展工具。

通用

VS Code 的中文 (繁體) 語言套件

• 如果你對英文介面感到困擾，那就安裝這個擴展工具吧!

IntelliCode

• 運用AI分析你的程式，提供即時的程式補全提示(snippet)

Todo Tree

• 註解以TODO或FIXME為開頭，就能標記這行註解，從側邊攔可以很輕易地看到你有哪些被標記的註解
• 使用案例
  • // FIXME: 在xxx情況下會出現bug，待修復
  • // TODO: 未完善的功能，之後有空再研究
  • // TODO: 這段寫得太醜，要問同學或老師有沒有更好的寫法

Prettier

• 自以為是的程式排版工具(官方自介)
• 使用快捷鍵Alt + Shift + F重新排版
• 其實官網介紹了很多使用方式，後續可再依照個人或團隊習慣做增修
  • 排版工具有很多，官網有教你如何預設使用Prettier排版
  • 為不同的語言設定不同的排版工具
  • 存檔時是否自動排版

GitLens — Git supercharged

• 釋放git的超能力，文件的歷史變的無所遁形。

前端

Auto Rename Tag

• 極大程度的幫助我們修改html tags

Live Server

• 修改靜態的html檔案的結果可以馬上顯示在瀏覽器上，不用額外按重新整理

Quokka.js

• 加速開發者寫javascript的工具
• 即時執行javascript程式，並將執行結果顯示在你的程式旁邊

Tips & 快捷鍵

熟記幾個快捷鍵能幫助你提高工作效率!!

Below are links to the three platform-specific versions (US English keyboard):

• Windows
• macOS
• Linux

Ctrl+P Quick Open, Go to File… 輸入檔名(模糊比對)快速打開檔案
Ctrl+R 快速打開最近開啟過的資料夾
Ctrl+R 關閉目前分頁(標籤)
Ctrl+Shift+K Delete line 刪除游標所在那行
Ctrl+Tab 打開標籤選擇視窗(須按住Ctrl)

這樣看應該很沒有感覺，所以推薦這部影片學習一下快捷鍵的使用上有哪些小技巧。

小結

會寫這篇是因為帶新人工程師的時候有時會看到他們用滑鼠點來點去，點的我有點心急...，所以有時候會有需要跟他們說如何使用他們手上的開發者工具。

這篇雖然主要是介紹VS Code，但其實不只是VS Code有擴展工具跟快捷鍵，所有的開發者工具都有，希望大家都能掌握快捷鍵，解放滑鼠提高工作效率。

圖片來源: https://code.visualstudio.com/brand